<template>
  <div class="home">
    <Header></Header>
    <ly-tab
      v-model="selectedId"
      :items="items"
      :options="options"
      @change="lyTab"
    >
    </ly-tab>

    <div class="container">
     <Swiper> </Swiper>
     <Icons> </Icons>
    </div>
  </div>
</template>

<script>
import Header from '@/components/home/Header.vue'
import Swiper from '@/components/home/Swiper.vue'
import Icons from '@/components/home/Icons.vue'

export default {
  data() {
    return {
      selectedId: 0,
      items: [
        { label: '推荐' },
        { label: '手机' },
        { label: '智能' },
        { label: '后端' },
        { label: '电视' },
        { label: '家电' },
        { label: '笔记本' },
        { label: '设计' }
      ],
      options: {
        activeColor: 'red'
        // 可在这里指定labelKey为你数据里文字对应的字段名
      }
    }
  },
  components: {
    Header,
    Swiper,
    Icons
  },
  methods: {
    lyTab(item, index) {
      console.log(item, index)
    }
  }
}
</script>
<style lang="scss" scoped>
.ly-tab-list >>> .ly-tab-active-bar {
  bottom: 0;
}
</style>
